import React from 'react';
import Icon from '@/components/icon';
import { Table } from 'antd';
import css from './index.module.less';

function List(props:any) {
  const { shopList } = props;
  // console.log('cccc', props);
  const dataSource = shopList;
  const columns = [
    {
      title: '商品',
      dataIndex: 'title',
      key: 'title',
      render: (text:any, record:any, index:number) => {
        return (
          <div className={css.header}>
            <img src={record.cover} alt="" />
            <span>{record.title}</span>
          </div>
        );
      },
    },
    {
      title: '直播价',
      dataIndex: 'min_price',
      key: 'min_price',
    },
    {
      title: '销量',
      dataIndex: 'sell_num',
      key: 'sell_num',
    },
    {
      title: '销售额',
      dataIndex: 'gmv',
      key: 'gmv',
      render: (text:any, record:any, index:number) => {
        return (
          <span>{record.min_price * record.sell_num}</span>
        );
      },
    },
  ];
  return (
    <div className={css.list_box}>
      <div className={css.title}>
        <div className={css.icon}>
          <Icon type="icon-liebiao" />
        </div>
        <div className={css.title_}>
          <span>商品列表</span>
        </div>
      </div>
      <div className={css.table}>
        <Table
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
        ;
      </div>
    </div>
  );
}
export default List;
